<template>
    <view class="cu-custom w-100v hidden solid-bottom" :class="[{fixed}]" :style="[{height:CustomBar + 'px'}]">
        <view class="cu-bar fixed" :style="style" :class="[bgImage!=''?'none-bg text-white bg-img':'',bgColor]">
            <view class="action flex center" @tap="BackPage" v-if="isBack || diyBack">
				<image v-if="backIcon" class="icon-Back flex u-m-r-28" :src="backImg[backIcon]" mode="scaleToFill"></image>
				<text v-else class="cuIcon-back"></text>
				<view class="backText">
                    <slot name="backText"></slot>
                </view>
            </view>
            <view class="content" :style="[{top:StatusBar + 'px'}]">
                <view class="backText">
                    <slot name="content"></slot>
                </view>
            </view>
            <slot name="right"></slot>
        </view>
    </view>
</template>

<script>
    export default {
        data() {
            return {
                backImg: [
                    'https://muxianpeipao-1251466604.cos.ap-nanjing.myqcloud.com/images/20240617/6872831ec130f5071413cfd5e80ba6e7.png',
                    'https://muxianpeipao-1251466604.cos.ap-nanjing.myqcloud.com/images/20240619/088794b651192bf0fd83323b57a1368c.png',
                    'https://muxianpeipao-1251466604.cos.ap-nanjing.myqcloud.com/images/20240620/d690c440b0fb9084559960b765ea987b.png'
                ],
                StatusBar: this.StatusBar,
                CustomBar: this.CustomBar
            };
        },
        name: 'cu-custom',
        computed: {
            style() {
                var StatusBar = this.StatusBar;
                var CustomBar = this.CustomBar;
                var bgImage = this.bgImage;
                var style = `height:${CustomBar}px;padding-top:${StatusBar}px;`;
                if (this.bgImage) {
                    style = `${style}background-image:url(${bgImage});`;
                }
                return style
            }
        },
        props: {
            bgColor: {
                type: String,
                default: ''
            },
            isBack: {
                type: [Boolean, String],
                default: false
            },
            diyBack: {
                type: [Boolean, String],
                default: false
            },
            fixed: {
                type: [Boolean, String],
                default: false
            },
            backIcon: {
                type: String,
                default: ''
            },
            bgImage: {
                type: String,
                default: ''
            },
        },
        methods: {
            BackPage2() {
                if (this.diyBack) {
                    this.$emit('BackPage');
                } else {
                    uni.navigateBack({
                        delta: 1
                    });
                }
            },

            BackPage() {
                if (this.diyBack) {
                    return this.$emit('BackPage');
                }
                let pages = getCurrentPages(); // 获取当前页面栈的实例
                let currPage = pages[pages.length - 1]; //当前页面
                let prevPage = pages[pages.length - 2]; //上一个页面
                //判断上一页是否为首页，如果是就直接返回首页
                if (prevPage && prevPage.route && prevPage.route.indexOf("/jump") != -1) {
                    uni.reLaunch({
                        url: '/pages/index/index'
                    })
                    return;
                }

                //uni.navigateBack() 关闭当前页面，返回上一页面或多级页面。可通过 getCurrentPages() 获取当前的页面栈，决定需要返回几层
                uni.navigateBack({
                    success: () => {
                        delta: 1 //返回的页面数，如果 delta 大于现有页面数，则返回到首页。默认为1
                    },
                    fail: () => {
                        uni.reLaunch({
                            url: '/pages/index/index'
                        })
                    }
                })
            },
        }
    }
</script>

<style scoped lang="scss">
    .cu-custom {
        line-height: 1;

        &.fixed {
            position: fixed;
            top: 0;
            left: 0;
            right: 0;
            z-index: 9;
        }
    }

    .icon-Back {
        width: 36rpx;
        height: 30rpx;
    }

    .backText {
        font-family: PingFang SC;
        font-weight: 500;
        font-size: 36rpx;
        color: #101010;
    }
</style>